<template>
  <Sheet :render-whole="true" :shadow="2" :padding="[0]" :round="4">
    <Cell :margin="[0]" show-avatar bottom-border v-for="item in props.playList" :key="item.id" :avatar="item.coverImgUrl"
      :label="`${item.trackCount}首`" :avatar-round="4" :avatar-size="90"
      @click="onNavigateTo(`/pages/playList/detail/index?id=${item.id}`)">
      <template #title>
        <Text :label="item.name" />
      </template>
    </Cell>
  </Sheet>
</template>
<script setup lang='ts'>
import type { PlayItem } from '@/types/song';
import { onNavigateTo } from '@/utils';
import Cell from '@/tmui/components/tm-cell/tm-cell.vue';
import Text from '@/tmui/components/tm-text/tm-text.vue';
import Sheet from '@/tmui/components/tm-sheet/tm-sheet.vue';

const props = defineProps({
  playList: {
    type: Object as PropType<PlayItem[]>,
    default: () => []
  }
})
</script>
<style lang='scss' scoped></style>